//task 数据结构
let tasks = [
    {id: 1, text: "睡觉", completed: false},
    {id: 1, text: "吃饭", completed: true},
    {id: 1, text: "打豆豆", completed: false},
];
console.log(tasks);
//添加按钮增加点击事件，获取按钮
let addBtn = document.querySelector(".addtask .addbtn");
let inputText = document.querySelector(".addtask input");
let ul = document.querySelector(".tasklist ul");
let category=document.querySelector(".category");
let inputSearch=document.querySelector(".search input");
 
// let completedBtn=document.querySelector("#completed");
// let uncompletedBtn=document.querySelector("#uncompleted");
// 事件添加
//window.onload事件
window.addEventListener('load', function(){
    renderTasks(tasks);
    //添加事件

})
//添加按钮
addBtn.addEventListener('click', function(){
    if(inputText.value.trim()!=""){

    //不为空


    let id = tasks[tasks.length - 1].id + 1;
    const task={
    id: id,text: inputText.value, completed: false
    };
    //2.把对象放到tasks数组中
    tasks.push(task);
    //显示console.log(tasks);
    // console.log(tasks);
    //渲染
    renderTasks(tasks);
    //清空输入框
    inputText.value = "";
    }else{
        window.alert("请输入内容");
    }
    //数据添加
    //1.产生数据-task对象
    //数组最后一个值+1
    //category添加事件-filter 判断是哪个按钮--事件委托
    category.addEventListener('click',function(e){
    if(e.target.tagName=="BUTTON"){
    const filter = e.target.dataset.filter;
    //渲染
    renderTasks(filterTasks(tasks,filter))

    }
})
})
//category添加事件-filter 判断是哪个按钮--事件委托
category.addEventListener('click',function(e){
    if(e.target.tagName=="BUTTON"){
    const filter = e.target.dataset.filter;
    //渲染
    renderTasks(filterTasks(tasks,filter))

    }
})

//
inputSearch.addEventListener('keydown',function(e){
    if(e.key==="Enter"){
        //判断搜索框是否为空
        if(inputSearch.value.trim()!=""){
            //拿搜索框中的值和数组中每个元素的text值进行搜索 得到一个数组
            const searchTasks = tasks.filter(task=>task.text.includes(inputSearch.value));
            renderTasks(searchTasks);
        }else{
            window.alert("请输入搜索内容");
        }
       
    }
})
//使用事件委托删除操作
ul.addEventListener('click',function(e){
   removeTask(e)
   editTask(e);
   changeStatus(e);
})

// //所有
// allBtn.addEventListener('click',function(){
//     //渲染
//     renderTasks(tasks);
// })
// //已完成
// completedBtn.addEventListener('click',function(){
//     //渲染
//     renderTasks(tasks.filter(task=>!task.completed));
// })
// //未完成
// uncompletedBtn.addEventListener('click',function(){
//     //渲染
//     renderTasks(tasks)
//     renderTasks(tasks.filter(task=>!task.completed));
// })

//4.函数
function renderTasks(tasks){
   



    //清空现有的ul中html
    ul.innerHTML = "";
    tasks.forEach(task=>{
        //创建一个元素
        const li = document.createElement("li");
        //修改元素html内容
        li.innerHTML = `<div class="left">
                <input type="checkbox" data-id="${task.id}" ${task.completed?'checked':''}>
                <span class="${task.completed?'line':''}">${task.text}</span>
            </div>
            <div class="btn-group">
                <button class="editBtn" data-id="${task.id}">编辑</button>
                <button class="delBtn" data-id="${task.id}">删除</button>
            </div>
            `;
            // const input = li.querySelector("input");
            // console.log(input);
            // input.checked=task.completed;
        
        //找到删除按钮
        const delBtn = li.querySelector(".delBtn");
        //绑定删除按钮
        // delBtn.onclick = removeTask
        // delBtn.addEventListener('click',removeTask(task.id))
        delBtn.addEventListener('click',function(e){
            removeTask(task.id,e);
        })
    //把元素放到ul中
    ul.appendChild(li);
    //底部统计数据的渲染
    //生成统计数据
    let all = tasks.length;
    let completed =tasks.filter(task=>task.completed).length;
    let uncompleted = all - completed;
    
    //修改对应元素的数据
    // const spans=document.querySelector('.footer span');
    // spans[0].textContent=`全部 ${all}`;
    // spans[1].textContent=`全部 ${completed}`;
    // spans[2].textContent=`全部 ${uncompleted}`;
    //获取元素的另外方法
    document.querySelector('.footer span:nth-child(1)').textContent=`全部 ${all}`;
    document.querySelector('.footer span:nth-child(2)').textContent=`已完成 ${completed}`;
    document.querySelector('.footer span:nth-child(3)').textContent=`未完成 ${uncompleted}`;
            // //过滤以后的数据
            // const filterTasks=[];
            // switch (filter) {
            //     case "completed":
            //         filterTasks = tasks.filter(task=>task.completed);
            //         break;
            //     case "uncompleted":
            //         filterTasks = tasks.filter(task=>!task.completed);
            //         break;
            //     default:
            //         filterTasks = tasks;
            //         break;
            // }
})
}
function filterTasks(tasks,filter) {
    switch (filter) {
      case "completed":
       return tasks.filter(task=>task.completed);
      case "uncompleted":
        return  tasks.filter(task=>!task.completed);
      default:
        return tasks;
    }
}
function changeStatus(e){
    let li;
    if(e.target.nodeName=="INPUT"){
       const id=e.target.dataset.id;
       console.log(id);
       const task = tasks.find(task=>task.id==id);
       console.log(task);
       console.log(e.target.checked);
       task.completed=e.target.checked;
       //修改后面文本的样式
       e.target.parentElement.children[1].classList.toggle("line");
       
       
    }
}
//删除函数
function removeTask(e){
   // 确保 e 是一个事件对象
   if (e && e.target) {
    // 检查触发事件的元素是否是按钮
    if (e.target.nodeName == "BUTTON" && e.target.className=="delBtn") {
        const id = e.target.dataset.id;
        tasks = tasks.filter(task => task.id !== id);
        // 获取包含删除按钮的 li 元素
        let li = e.target.parentElement.parentElement;
        // 移除 li 元素
        li.parentNode.removeChild(li);
    }
    
}
}
//编辑函数
function editTask(e){
    let li;
     // 检查触发事件的元素是否是按钮
     if (e.target.nodeName == "BUTTON" && e.target.className=="editBtn") {
        const id = e.target.dataset.id;
        const task = tasks.find(task => task.id == id);
        console.log(id);
        showEditAlert(id,task.text); 
 }
 }
 function updateCount(){
    let all = tasks.length;
    let completed =tasks.filter(task=>task.completed).length;
    let uncompleted = all - completed;
    document.querySelector('.footer span:nth-child(1)').textContent=`全部 ${all}`;
    document.querySelector('.footer span:nth-child(2)').textContent=`已完成 ${completed}`;
    document.querySelector('.footer span:nth-child(3)').textContent=`未完成 ${uncompleted}`;
 }
    